<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="../vue.js"></script>
</head>

<body>
  表单修饰符
  .number 将表单中value的字符串格式转化为数值
  .lazy 值改变+失去焦点 ---》同步数据
  .trim 去掉前后空格
  <div id="app">
    <input type="text" :value="val" @keydown="show">
    <h1>{{val}}</h1>


    <input type="text" v-model="inp" @keydown="show">
    <h1>{{inp}}</h1>

    <select v-model="selecteda">
      <option>--请选择--</option>
      <option v-for="item in options" :key="item.value" :value="item.value">{{item.text}}</option>
    </select>
    <h1>{{selecteda}}</h1>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        val: 'mysjkl',
        inp: "",
        selecteda: "",
        options: [
          { text: 'One', value: 'A' },
          { text: 'Two', value: 'B' },
          { text: 'Three', value: 'C' }
        ]
      },
      methods: {
        show() {
          //    console.log(typeof this.inp);
          console.log(this.inp.length);
        }
      }
    })
  </script>
</body>

</html>